import React from 'react';
import { Form, Select, Card, Upload, message, Button, Icon } from 'antd';
import UploadTheUserAvatar from './components/upload-the-user-avatar'
import PhotoWall from './components/photo-wall'
import ListUploadedFiles from './components/list-uploaded-files'
import DragDropUploads from './components/drag-drop-uploads'
import FullyControlledUploadList from './components/fully-controlled-upload-list'
import PictureListStyle from './components/picture-list-style'
import UploadFilesManually from './components/upload-files-manually'
import CustomizeLocalPreview from './components/customize-local-preview'
import ConvertingFilesBeforeUploading from './components/converting-files-before-uploading'
import AlibabaCloudOSS from './components/alibaba-cloud-oss'

const props = {
  name: 'file',
  action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
  headers: { authorization: 'authorization-text' },
  onChange(info) {
    if (info.file.status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (info.file.status === 'done') {
      message.success(`${info.file.name} file uploaded successfully`);
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} file upload failed.`);
    }
  },
};


class Transfer extends React.Component {

  render() {
    return (
      <>
        <Card title="1、经典款式，用户点击按钮弹出文件选择框" style={{ marginTop: 10 }}>
          <Upload {...props}>
            <Button> <Icon type="upload" /> Click to Upload </Button>
          </Upload>
        </Card>

        <Card title="2、点击上传用户头像，并使用 beforeUpload 限制用户上传的图片格式和大小" style={{ marginTop: 10 }}>
          <UploadTheUserAvatar></UploadTheUserAvatar>
        </Card>

        <Card title="3、已上传的文件列表" style={{ marginTop: 10 }}>
          <ListUploadedFiles></ListUploadedFiles>
        </Card>


        <Card title="4、照片墙,用户可以上传图片并在列表中显示缩略图。当上传照片数到达限制后，上传按钮消失" style={{ marginTop: 10 }}>
          <PhotoWall></PhotoWall>
        </Card>

        <Card title="5、完全控制的上传列表,使用 fileList 对列表进行完全控制，可以实现各种自定义功能,1、上传列表数量的限制,2、读取远程路径并显示链接。" style={{ marginTop: 10 }}>
          <FullyControlledUploadList></FullyControlledUploadList>
        </Card>

        <Card title="6、支持上传一个文件夹里的所有文件" style={{ marginTop: 10 }}>
          <Upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" directory>
            <Button> <Icon type="upload" /> Upload Directory </Button>
          </Upload>
        </Card>

        <Card title="7、把文件拖入指定区域，完成上传，同样支持点击上传" style={{ marginTop: 10 }}>
          <DragDropUploads></DragDropUploads>
        </Card>

        <Card title="8、上传文件为图片，可展示本地缩略图。IE8/9 不支持浏览器本地缩略图展示（Ref），可以写 thumbUrl 属性来代替。" style={{ marginTop: 10 }}>
          <PictureListStyle></PictureListStyle>
        </Card>

        <Card title="9、手动上传,beforeUpload 返回 false 后，手动上传文件" style={{ marginTop: 10 }}>
          <UploadFilesManually></UploadFilesManually>
        </Card>

        <Card title="10、自定义本地预览，用于处理非图片格式文件（例如视频文件）" style={{ marginTop: 10 }}>
          <CustomizeLocalPreview></CustomizeLocalPreview>
        </Card>

        <Card title="11、上传前转换文件,使用 transformFile 转换上传的文件（例如添加水印）" style={{ marginTop: 10 }}>
          <ConvertingFilesBeforeUploading></ConvertingFilesBeforeUploading>
        </Card>


        <Card title="12、阿里云 OSS" style={{ marginTop: 10 }}>
          <AlibabaCloudOSS></AlibabaCloudOSS>
        </Card>






      </>
    );
  }
}

const WrappedTransfer = Form.create({ name: 'Transfer1' })(Transfer)


export default class WrappedSeart extends React.Component {
  render() {
    return <WrappedTransfer placeholder="请输入要查询的信息" style={{}} wrappedComponentRef={(form) => this.form = form} />
  }
}




// API#
// 参数	                      说明	类型	默认值	版本
// accept	                   接受上传的文件类型, 详见 input accept Attribute	string	无	
// action	                   上传的地址	string|(file) => Promise	无	
// method	                   上传请求的 http method	string	'post'	3.25.0
// directory	               支持上传文件夹（caniuse）	boolean	false	3.7.0
// beforeUpload	             上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传。支持返回一个 Promise 对象，Promise 对象 reject 时则停止上传，resolve 时开始上传（ resolve 传入 File 或 Blob 对象则上传 resolve 传入对象）。注意：IE9 不支持该方法。	(file, fileList) => boolean | Promise	无	
// customRequest	           通过覆盖默认的上传行为，可以自定义自己的上传实现	Function	无	
// data	                     上传所需额外参数或返回上传额外参数的方法	object|(file) => object	无	
// defaultFileList 	         默认已经上传的文件列表	object[]	无	
// disabled	                 是否禁用	boolean	false	
// fileList	                 已经上传的文件列表（受控），使用此参数时，如果遇到 onChange 只调用一次的问题，请参考 #2423	object[]	无	
// headers	                 设置上传的请求头部，IE10 以上有效	object	无	
// listType	                 上传列表的内建样式，支持三种基本样式 text, picture 和 picture-card	string	'text'	
// multiple	                 是否支持多选文件，ie10+ 支持。开启后按住 ctrl 可选择多个文件	boolean	false	
// name	                     发到后台的文件参数名	string	'file'	
// previewFile	             自定义文件预览逻辑	(file: File | Blob) => Promise<dataURL: string>	无	3.17.0
// showUploadList	           是否展示文件列表, 可设为一个对象，用于单独设定 showPreviewIcon, showRemoveIcon 和 showDownloadIcon	Boolean or { showPreviewIcon?: boolean, showRemoveIcon?: boolean, showDownloadIcon?: boolean }	true	
// supportServerRender 	     服务端渲染时需要打开这个	boolean	false	
// withCredentials	         上传请求时是否携带 cookie	boolean	false	
// openFileDialogOnClick	   点击打开文件对话框	boolean	true	3.10.0
// onChange	                 上传文件改变时的状态，详见 onChange	Function	无	
// onPreview	               点击文件链接或预览图标时的回调	Function(file)	无	
// onRemove  	               点击移除文件时的回调，返回值为 false 时不移除。支持返回一个 Promise 对象，Promise 对象 resolve(false) 或 reject 时不移除。              	Function(file): boolean | Promise	无  	
// onDownload	               点击下载文件时的回调，如果没有指定，则默认跳转到文件 url 对应的标签页。	Function(file): void	跳转新标签页	
// transformFile  	         在上传之前转换文件。支持返回一个 Promise 对象  	Function(file): string | Blob | File | Promise<string | Blob | File>	无  	3.21.0

